<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./lib/vue.js"></script>
        <title>Document</title>
        <style>
            #login{
                background-color: blue;
            }
            #register{
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h1>{{ msg }}</h1>
            <h1 v-once>{{ msg }}</h1>
            <!-- v-once 一次性插入不在修改 -->
            <!-- 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新 -->
            <hr>
            <!-- 插入html内容 -->
            <h1>{{htmlTxt}}</h1><!-- 将标签将文本形式输出 -->
            <h1 v-html="htmlTxt"></h1><!-- 将span标签插入h1标签中 -->
            <hr>
            <!-- 修改属性内容 -->
            <div v-bind:id="idName">
                <!-- v-bind:id  可以写成 :id -->
                <h1>登陆</h1>
            </div>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    msg:"hello Vue!!!",
                    htmlTxt:"<span>hello</span>",
                    idName:"login"
                }
            })
        </script>
    </body>
</html>